<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery实现无缝图片滚动效果</title>
		<script src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			li {
				list-style-type: none;
				margin-top: 40px;
			}

			body {
				margin: 20px;
			}

			.wrap {
				border: 3px solid #f00;
				width: 600px;
				height: 200px;
				position: relative;
				overflow: hidden;
			}

			.wrap ul {
				overflow: hidden;
				position: absolute;
				width: 1600px;
				left: 0;
				_height: 1px;
			}

			.wrap ul li {
				float: left;
				width: 200px;
			}


			.er {
				border: 3px solid #f00;
				width: 600px;
				height: 200px;
				position: relative;
				overflow: hidden;
			}

			.er ul {
				overflow: hidden;
				position: absolute;
				width: 1600px;
				left: 0;
				_height: 1px;
			}

			.er ul li {
				float: left;
				width: 200px;
			}

			.san {
				border: 3px solid #f00;
				width: 600px;
				height: 200px;
				position: relative;
				overflow: hidden;
			}

			.san ul {
				overflow: hidden;
				position: absolute;
				width: 1600px;
				left: 0;
				_height: 1px;
			}

			.san ul li {
				float: left;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<a href="javascript:;" class="goLeft">向左走</a> <a href="javascript:;" class="goRight">向右走</a>
			<ul>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
			</ul>
		</div>

		<div class="er">
			<a href="javascript:;" class="goLeft">向左走</a> <a href="javascript:;" class="goRight">向右走</a>
			<ul>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
			</ul>
		</div>

		<div class="san">
			<a href="javascript:;" class="goLeft">向左走</a> <a href="javascript:;" class="goRight">向右走</a>
			<ul>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
				<li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
			</ul>
		</div>

		<script>
			// 如果想要使一个元素运动起来，一般情况下这个元素须要具有position属性absolute/relative
			$(function() {
				function fengzhuang(fuclass) {
					var oul = $(fuclass).find('ul');
					var oulHtml = oul.html();
					oul.html(oulHtml + oulHtml)
					var timeId = null;
					var ali = $(fuclass).find('ul li');
					var aliWidth = ali.eq(0).width();
					var aliSize = ali.size();
					var ulWidth = aliWidth * aliSize;
					oul.width(ulWidth); //1600px
					var speed = 2;

					function slider() {
						if (speed < 0) {
							if (oul.css('left') == -ulWidth / 2 + 'px') {
								oul.css('left', 0);
							}
							oul.css('left', '+=-2px');
						}
						if (speed > 0) {
							if (oul.css('left') == '0px') {
								oul.css('left', -ulWidth / 2 + 'px');
							}
							oul.css('left', '+=' + speed + 'px');
						}

					}
					// setInterval()函数的作用是：每隔一段时间，执行该函数里的代码
					var timeId = setInterval(slider, 30);
					$(fuclass).find('ul').mouseover(function() {
						// clearInterval()函数的作用是用来清除定时器
						clearInterval(timeId);
					});
					$(fuclass).find('ul').mouseout(function() {
						timeId = setInterval(slider, 30);
					});

					$(fuclass).find('.goLeft').click(function() {
						speed = -2;
					});
					$(fuclass).find('.goRight').click(function() {
						speed = 2;
					});
				}
				fengzhuang('.wrap')
				fengzhuang('.er')
				fengzhuang('.san')
			});
		</script>

	</body>
</html>
